<?php
$default = array(
		"title" => "Deutschlands Stube",
		"favicon" => "sn/favicon.ico",		// <- TODO generic favicon
		"style" => "style.css",
		"centerPointX" => "52.518611", 		// center on Berlin
		"centerPointY" => "13.408056",
		"website" => "http://slothsoft.de/",
		"federalState" => "Germany",
);
if (isset($customization))
	$default = array_merge($default, $customization);
extract($default);
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title><?php echo $title; ?></title>
<link rel="shortcut icon" href="<?php echo $favicon; ?>"
	type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $style; ?>">
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?key=AIzaSyDY0mrlB6RfFMU8oATG2C8qfPnBkZMIQPw&sensor=true"></script>
<script type="text/javascript" src="stube.js"></script>
<script type="text/javascript" src="stube-affiliate.js"></script>
<script type="text/javascript"
	src="http://arshaw.com/xdate/downloads/0.8/xdate.js"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

	function initialize() {
		var centerPoint = new google.maps.LatLng(<?php echo $centerPointX; ?>, <?php echo $centerPointY; ?>);
		createMap(document.getElementById("map_canvas"),
				createDefaultMapOptions(centerPoint));
		fetchMarkersAround(centerPoint.lat(), centerPoint.lng());
		createBoundsForState('<?php echo $federalState; ?>');
	}

	function handleAddressKeyPress(event) {
		if (event.keyCode === 13)
			handleCenter();
		return false;
	}

	function handleCenter() {
		centerAtAddress(document.getElementById("search-text").value);
	}

	function centerAtAddress(address) {
		var input = {
			'address' : decodeURI(address),
			'bounds' : viewPort
		};
		geocoder.geocode(input, function(results, status) {
			if (address.length < 3) {
				handleResults(results, [], address);	
			} else {
				$.ajax({
					url : '../rest/events',
					type : 'GET',
					data : 'name=' + decodeURI(address) + "&federalState=<?php echo $fld14; ?>",
					dataType : 'json',
					success : function(events) {
						handleResults(results, events, address);	
					}
				});
			}
		});
	}

	function handleResults(results, events, address) {
		var searchResults = [];
		convertResultToSearchResult(searchResults, results);
		convertEventToSearchResult(searchResults, events);

		var validResults = getValidResults(searchResults);
		if (validResults.length == 1) {
			centerAt(validResults[0].location);
		} else {
			showResultList(searchResults, address);
		}
	}
</script>
</head>
<body onload="initialize()">

	<div id="search-form">
		<table>
			<tr>
				<td><input id="search-text" type="text"
					onkeypress="handleAddressKeyPress(event)" autofocus /></td>
				<td><input id="search-button" type="submit" value=""
					onclick="handleCenter();" /></td>
			</tr>
		</table>
	</div>

	<div id="legend">
		<div class="checkbox-wrapper date-checkbox-wrapper">
			<input type="checkbox" id="date-checkbox"
				onclick="toggleMarkerTypeCheckbox(this)" checked /> <label></label>
		</div>
		<div class="checkbox-wrapper pension-checkbox-wrapper">
			<input type="checkbox" id="pension-checkbox"
				onclick="toggleMarkerTypeCheckbox(this)" checked /> <label></label>
		</div>
		<div class="checkbox-wrapper restaurant-checkbox-wrapper">
			<input type="checkbox" id="restaurant-checkbox"
				onclick="toggleMarkerTypeCheckbox(this)" checked /> <label></label>
		</div>
		<div class="checkbox-wrapper stuff-checkbox-wrapper">
			<input type="checkbox" id="stuff-checkbox"
				onclick="toggleMarkerTypeCheckbox(this)" checked /> <label></label>
		</div>
	</div>

	<div id="result-list">
		<div id="result-list-x">
			<a href="javascript:void(0);" onclick="setResultListVisible(false)">[X]</a>
		</div>
		<div id="result-list-content"></div>
	</div>

	<div id="crest"
		onclick="window.location.href='<?php echo $website; ?>'"></div>
	<!-- Saxon link -->

	<div id="map_canvas" style="width: 100%; height: 100%"></div>
</body>
</html>
